<template>
    <view class="page column over-hide">
        <hj-navbar title="商品详情" />
        <view class="w100 flex-auto over-auto-y">
            <!-- 图片轮播 -->
            <ImagesSwiper :list="goodsImgList" />
            <!-- 商品信息 -->
            <GoodsInfo :count="exchangeNum" @change="handleCount" />
            <!-- 商品详情 -->
            <GoodsDetails />
            <!-- 商品底部以及商品规格选择 -->
            <GoodsFoot :count="exchangeNum" @change="handleCount" />
            <!-- 底部安全区 -->
            <hj-safe-footer />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 商品详情页面
 * @author yinzhi
 * @date 2025-03-19
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
import { logger } from '@/utils/log.js'

import ImagesSwiper from './components/ImagesSwiper.vue'
import GoodsInfo from './components/GoodsInfo.vue'
import GoodsDetails from './components/GoodsDetails.vue'
import GoodsFoot from './components/GoodsFoot.vue'
defineComponent({
    components: {
        ImagesSwiper,
        GoodsInfo,
        GoodsDetails,
        GoodsFoot
    }
})

// 商品id
const goodsId = ref('')
// 轮播图
const goodsImgList = ref([])
// 需要兑换数量 默认一件
const exchangeNum = ref(1)

onLoad(async e => {
    goodsId.value = e.id || '1'
    await getGoodsDetail()
})
// 获取商品详情
const getGoodsDetail = async () => {
    if (!goodsId.value) {
        return
    }
    try {
        goodsImgList.value = [
            'https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg',
            'https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg',
            'https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg',
            'https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg'
        ]
    } catch (error) {
        logger.error({ '[getGoodsDetail]-获取商品详情失败：': error })
    }
}

// 兑换数量变化
const handleCount = count => {
    exchangeNum.value = count
}
</script>

<style scoped lang="scss"></style>
